<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单管理界面</title>
    <script src="/super/js/jquery-1.11.0.js" type="text/javascript"></script>

<%--    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--%>
<%--    <!--引入阿里巴图标库-->--%>
<%--    <link rel="stylesheet" href="/font/fong-style/iconfont.css">--%>
<%--    <link rel="stylesheet" href="/css/style.css" />--%>
<style type="text/css">
    .update_data{
        /*通过js动态控制它的显示*/
        display: none;
        position: absolute;
        top: 5%;
        left: 25% ;
    }
    .insert_data{
        /*通过js动态控制它的显示*/
        display: none;
        position: absolute;
        top: 5%;
        left: 25% ;
    }
    .update_data table td{
        background-color: beige;
        /*height: 50px;*/
    }
    .update_data table{
        width: 310px;
        height: 400px;
    }
    .update_data table input{
        height: 30px;
    }
</style>
</head>
<body>
<!--插入页面-->
<!--订单管理页面-->
<div class="order_manage">
    <!--查询参数-->
    <div class="order_find" style="height: 50px;width: 100%;background-color: whitesmoke;padding-top: 10px;border-top: 1px solid cadetblue;">
        <form action="/super/getorder" method="get">
            <div style="display: flex;font-size: 15px">
                <div style="margin-left: 30px;">
                    <span>商品名称：</span>
                    <input type="text" name="product_name" />
                </div>
                <div style="margin-left: 50px;">
                    <span>供应商：</span>
                    <input type="text" name="supplier" />
                </div>
                <div style="margin-left: 50px;">
                    <span>是否已付款</span>
                    <select name="payStatus">
                        <option value="已付款">已付款</option>
                        <option value="未付款" selected="selected">未付款</option>
                    </select>
                </div>
                <!--查询-->
                <div style="margin-left: 60px;">
                    <input type="submit" value="查询" style="background-color:#87c212;width:100px;color:white;">
                </div>
                <div style="margin-left: 60px;">
                    <input type="reset" value="清空" style="background-color:#87c212;width:100px;color:white;">
                </div>
            </div>
        </form>
    </div>
    <!--添加订单按钮-->
    <a  id="addOrder" href="#" style="background-color: #47acf1;font-size: 15px;color: white;display: inline-block;padding: 0px 10px;border-radius: 3px;margin-left: 900px;cursor: pointer;margin-top: 15px;text-decoration: none;">
        <i class="iconfont icon-tianjia" style="color: #85d017;"></i>
        <span style="display: inline-block;position: relative;top: -6px;font-weight: bold;">添加订单</span>
    </a>

    <div class="table_position" style="margin-top: 10px;">
        <!--展示数据区域-->
        <table border="1">
            <tr>
                <th style="width: 120px;">订单编码</th>
                <th style="width: 150px;">商品名称</th>
                <th style="width: 150px;">供应商</th>
                <th style="width: 100px;">订单金额</th>
                <th style="width: 150px;">是否付款</th>
                <th style="width: 180px;">创建时间</th>
                <th style="width: 200px;">操作</th>
            </tr>
            <c:forEach items="${applicationScope['order_condition']}" var="data">
                <tr>
                    <td><c:out value="${data.coding}"/></td>
                    <td><c:out value="${data.product_name}"/></td>
                    <td><c:out value="${data.supplier}"/></td>
                    <td><c:out value="${data.order_money}"/></td>
                    <td><c:out value="${data.payStatus}"/></td>
                    <td><c:out value="${data.createTime}"/></td>
<%--                    操作--%>
                    <td>

                        <div>
<%--                            修改--%>
                            <a  id="updateOrder" href="#${data.coding}" class="updateOrder" style="text-decoration: none">
                                <i class="iconfont icon-xiugai"></i>
                            </a>
<%--                            删除--%>
                            <a id="delOrder" href="/super/del?coding=${data.coding}" style="text-decoration: none;margin-left: 10px">
                                <i class="iconfont icon-shanchu"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>

    <!--分页区域-->
    <div class="pageing">
        <ul class="pagination">
            <li class="showdataLi">
                <a href="#">
                    一共20条数据,每页<input type="text" id="dataCount"/>条
                    当前为第<input type="text" id="currentPage">页
                </a>
            </li>
            <li>
                <a href="#" id="left_fit">«</a>
            </li>
<%--            如果展示的数据不为空--%>
<%--
<%--                循环展示数字方块
                    var:为当循环的值   将每个循环变量保存在item中
                    ${applicationScope.get('pageNum')}
                    count=${applicationScope.get('totalPageNum')}
                    current:代表当前页，初始化为1（如果有数据的话）
--%>

            <c:if test="${applicationScope.get('totalPageNum')>0}">
                <c:if test="${applicationScope.get('totalPageNum')>6}" var="totalPageNum">
                    <c:forEach  var="item" begin="1" end="6">
                        <li><a href="#" class="number">${item}</a></li>
                    </c:forEach>
                </c:if>
                <c:if test="${applicationScope.get('totalPageNum')<=6}" var="totalPageNum">
                    <c:forEach  var="item" begin="1" end="${totalPageNum}">
                        <li><a href="#" class="number">${item}</a></li>
                    </c:forEach>
                </c:if>
            </c:if>

            <li>
                <a href="#" id="right_fit">»</a>
            </li>
        </ul>
    </div>


</div>
<%--修改界面--%>
<div class="update_data">
   <table>
       <form action="/super/updateOrder" method="get">
           <tr>
               <td>订单编码:</td>
               <td>
                   <input type="text" name="coding" id="coding">
               </td>
           </tr>
           <tr>
               <td>商品名称:</td>
               <td>
                   <input type="text" name="product_name">
               </td>
           </tr>
           <tr>
               <td>供应商:</td>
               <td>
                   <input type="text" name="supplier">
               </td>
           </tr>
           <tr>
               <td>订单金额:</td>
               <td>
                   <input type="text" name="order_money">
               </td>
           </tr>
           <tr>
               <td>是否付款:</td>
               <td>
                   <input type="text" name="payStatus">
               </td>
           </tr>
           <tr>
               <td>
                   <input type="submit" id="makesure_order" value="确定" style="background-color: #85d017;color: white">
               </td>
               <td>
                   <input type="reset" value="重置" style="background-color: #85d017;color: white">
               </td>
           </tr>
       </form>
   </table>
</div>

<%--订单数据插入界面--%>
<div class="insert_data">
    <table>
        <form action="/super/add" method="get">
            <tr>
                <td>订单编码:</td>
                <td>
                    <input type="text" name="coding">
                </td>
            </tr>
            <tr>
                <td>商品名称:</td>
                <td>
                    <input type="text" name="product_name">
                </td>
            </tr>
            <tr>
                <td>供应商:</td>
                <td>
                    <input type="text" name="supplier">
                </td>
            </tr>
            <tr>
                <td>订单金额:</td>
                <td>
                    <input type="text" name="order_money">
                </td>
            </tr>
            <tr>
                <td>是否付款:</td>
                <td>
                    <input type="text" name="payStatus">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" id="makesure_order" value="确定" style="background-color: #85d017;color: white">
                </td>
                <td>
                    <input type="reset" value="重置" style="background-color: #85d017;color: white">
                </td>
            </tr>
        </form>
    </table>
</div>




<%--js代码  控制动作--%>
<script type="text/javascript">

    function getUpdateStatus(){
        $('#makesure_order').click(function (){
            $('.update_data').css("display","none")

            setTimeout(function (){
                var status="<%=session.getAttribute("status")%>";

                // 不知道为啥不能弹框
                if (status!=null){
                    console.log("更新状态staus不为null")
                    if (status=="success"){
                        alert("修改成功！")
                    }else{
                        alert("修改失败！！")
                    }
                }else {
                    console.log("更新状态staus为null")
                }
            },2000)

        })
    }

    $('.updateOrder').click(function (){
        $('.update_data').css("display","block")

    })


    function delFit(){
        $('#delOrder').click(function (){
            var status="<%=session.getAttribute("status")%>";
            if (status=="success"){
                alert("删除成功！")
            }else{
                alert("删除失败！！")
            }
        })
    }
    function updateFit(){
        $('#updateOrder').click(function (){
            $('.update_data').css("display","block")
            // 提取href属性值 #号后面的字符串赋值给待修改界面的coding input
            $('#coding').val($('#updateOrder').attr('href').substring(1))

            var status="<%=session.getAttribute("status")%>";

        })

    }

    function addOrder(){
        $('#addOrder').click(function (){
            $('.insert_data').css("display","block")
        })
    }

    // 对分页进行控制

    var first_number=0
    var last_number=0
    var current=1 // 初始化当前页面为第1页
    var count=getDataCount()//总的页数
    // 1.控制<<和>>的显示  影响<< 和 >> 变化的因素：1.点击<<和>>  2.点击小方块的数字
    function controL_R(current,count){
        if(count>=1 && count<=6){
            if(current>1 && current<6){
                // 显示<< 和 >>
                $('#left_fit').css("display","block")
                $('#right_fit').css("display","block")
                console.log("left:y right:y")

            }else if(current==1){
                // 显示>>
                $('#left_fit').css("display","none")
                $('#right_fit').css("display","block")
                console.log("left:n right:y")
            }else{
                // 显示<<
                $('#left_fit').css("display","block")
                $('#right_fit').css("display","none")
                console.log("left:y right:n")
            }
        }
        if(count==0){
            // 不显示 << 和 >>
            $('#left_fit').css("display","none")
            $('#right_fit').css("display","none")
            console.log("left:n right:n")
        }
        if (count>6){
            if(1<current &&  current<count){
                // 显示<< 和 >>
                $('#left_fit').css("display","block")
                $('#right_fit').css("display","block")
                console.log("left:y right:y")
            }
            if (current==count){
                // 显示<<
                $('#left_fit').css("display","block")
                $('#right_fit').css("display","none")
                console.log("left:y right:n")
            }
            if (current==1){
                // 显示<<
                $('#left_fit').css("display","none")
                $('#right_fit').css("display","block")
                console.log("left:y right:n")
            }
        }

    }
    // 初始化当前页小方块的颜色
    $("div.pageing ul li a[class='number']:first").css("background-color","pink")




    // 获取页面所展示数据  总的页数   这里必须和servletContext中 key=totalPageNum的数量一样
    function getDataCount(){
        var count=10
        return count
    }
    // 对第一个方块的数字和最后一个方块的数字做判断
    function get_first_last_Number(){
        if(count>6 && count<=getDataCount()){
            if(current>=4 && current<=8){
                first_number=current-3
                last_number=first_number+5
            }
            if(current>=1 && current<=3){
                first_number=1
                last_number=6
            }

        }
        if(count>=1 && count<=6){
            first_number=1
            last_number=count
        }
    }

    // 点击<<时对数字的控制函数
    function fit_left(){
        var i=0,j=0
        get_first_last_Number()
        if (current>1){
            current-=1
            get_first_last_Number()
            console.log("first_number="+first_number+"  "+"last_number="+last_number)
            // 对每个数字减1
            for(i=first_number;i<=last_number;i++){
                    $("div.pageing ul li a[class='number']")[j].innerHTML=i
                    j++
            }
        }else {
            console.log("第一个数字=1")
            return
        }
    }
    // 点击>>时对数字的控制函数
    function fit_right(){
        var i=0,j=0
        //第一个和最后一个数字依赖于当前的页面，所以前面要进行调用
        get_first_last_Number()
        if (current<count){
            current+=1
            get_first_last_Number()
            console.log("first_number="+first_number+"  "+"last_number="+last_number)
            for(i=first_number;i<=last_number;i++){
                    $("div.pageing ul li a[class='number']")[j].innerHTML=i
                    j++
            }
        }else {
            console.log("最后一个方块的数字="+count+"--不能再+了")
            return
        }
    }
    // 点击带有数字的小方块时对数字的控制函数
    function fit_number(){
            var i=0,j=0
            get_first_last_Number()
            for(i=first_number;i<=last_number;i++){
            $("div.pageing ul li a[class='number']")[j].innerHTML=i
            j++
        }
    }
    // 对first_number 和 last_number 作初始化
    function init_first_last(){
        if(count>=6){
            first_number=1
            last_number=6
        }
        if(count<6){
            first_number=1
            last_number=count
        }
    }
    // 给当前点击的小方块设置背景颜色
    function setBackground(){

        // 对所有数字方块的颜色恢复到原色  白色
        $("div.pageing ul li a[class='number']").each(function (index,ele){
            $(this).css("background-color","white")
        })

        $("div.pageing ul li a[class='number']").each(function (index,ele){
            if(parseInt(ele.innerHTML)==current){
                $(this).css("background-color","pink")
            }
        })

    }
    init_first_last()
    setBackground()
    // 初始化<< 和 >>的显示
    controL_R(current,count)

    // 获取当前点击的数字 保存在变量current中-------------------------------------------------
    $("div.pageing ul li a[class='number']").click(function (e){
        // 对分页下的a标签添加一个点击事件
        var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
        // 如果a标签的值不是数字的话
        if (!re.test(e.target.innerHTML)) {
        }else{
            current=parseInt(e.target.innerHTML)
            // 2.点击小方块的数字
            fit_number()
            controL_R(current,count)
        }
        setBackground()
        console.log("current="+current)
    })


//-----------------------------下面为控制逻辑--------------------------------------------------------------
    // 控制<<和>>的显示 和数字的变化
    // 1.点击<<和>>
    $('#left_fit').click(function (){
        fit_left()
        controL_R(current,count)  // 因为要获取最新的current，所以这行必须放在上面那句的后面
        setBackground()
        console.log("current="+current)
    })
    $('#right_fit').click(function (){
        fit_right()
        controL_R(current,count)
        setBackground()
        console.log("current="+current)
    })





    // 对分页进行设置
    $("input[id='dataCount']").css("height","18px")
    $("input[id='dataCount']").css("width","30px")

    $("input[id='currentPage']").css("height","18px")
    $("input[id='currentPage']").css("width","30px")

    $(".pageing ul li").css({"font-size":"17px"})
    // $(".pageing ul").css("height","25px")

    delFit()
    updateFit()
    getUpdateStatus()
    addOrder()
</script>
</body>
</html>
